<template>
  <div class="Mainbox">
    <!-- 头像 -->
    <heads v-show="arrbol[0]" class="HeadTop1">
        <i @click="gb1()"></i>
        <span>修改头像</span>
        <em @click="zhew()" class="el-icon-more-outline"></em>
    </heads>
    <!-- 修改昵称 -->
    <heads v-show="arrbol[1]" class="HeadTop1">
        <i @click="gb1()"></i>
        <span>修改昵称</span>
        <em @click="suc1()">保存</em>
    </heads>
        <!-- 邀请码 -->
    <heads v-show="arrbol[2]" class="HeadTop1">
        <i @click="gb1()"></i>
        <span>我的二维码</span>
        <em @click="zhew1()" class="el-icon-more-outline"></em>
    </heads>
    <!-- 二维码 -->
    <heads v-show="arrbol[3]" class="HeadTop1">
        <i @click="gb1()"></i>
        <span>我的邀请码</span>
    </heads>
    <!-- 修改手机号 -->
    <heads v-show="arrbol[4]" class="HeadTop1">
        <i @click="gb1()"></i>
        <span>修改手机号</span>
        <em @click="suc()">保存</em>
    </heads>  
    <!-- 账户管理 -->
      <heads v-show="!bol1" class="HeadTop1">
        <i @click="zhu()"></i>
        <span>账户管理</span>
        <!-- <em @click="success()">保存</em> -->
    </heads>

    <mains>
        <!-- 主页 -->
        <div class="main" v-show="!bol1">
            <div>
                <ul class="mainList">
                    <li v-for="(item,in1) in arr" :key="in1" @click="change(in1)" class="onetwo">
                        <span class="one">{{item.key1}}</span>
                        <span class="two"><i v-if="in1!=0&&in1!=2">{{item.cont1}}</i>
                        <i v-if="in1==2" class="two-ma"></i>
                            <div v-if="in1==0" class="mLImg">
                                <img :src="arr[0].cont1" alt="图片" class="Img1"/>
                            </div>
                        </span>
                        <i class="el-icon-arrow-right"></i>
                    </li>
                </ul>
            </div>
        </div>
        <!-- 头像修改 -->
         <div class="mainImg" v-show="arrbol[0]" >
            <img :src="arr[0].cont1" alt="图片" class="Img1"/>
        </div>
         <!-- 昵称修改 -->
        <div class="mainPwd" v-show="arrbol[1]">
            <input class="maintxt1" type="text" placeholder="请输入要修改的昵称" v-model="arr[1].cont1" />
        </div>
        <!-- 二维码 -->
        <div class="mainCont1" v-show="arrbol[2]">
            <div class="mainOne">
                <div>
                    <img src="../../assets/user/user-ma1.png" alt=""/>
                </div>
                <div>{{arr[1].cont1}}</div>
            </div>
            <div class="mainTwo">
                <div><img src="../../assets/user/user-maBig.png" alt=""/></div>
                <div>扫一扫上面二维码图案，邀请好友注册吧</div>
            </div>

        </div>
        <!--邀请码 -->
        <div class="mainCont1" v-show="arrbol[3]">
            <div class="mainOne">
                <div>
                    <img src="../../assets/user/user-ma1.png" alt=""/>
                </div>
                <div>{{arr[1].cont1}}</div>
            </div>
            <div class="mainTwo1">
                <div>我的邀请码：1234567890</div>
                <div>分享邀请码  邀请好友注册吧</div>
            </div>

        </div>
        <!-- 手机号修改 -->
        <div class="mainPwd" v-show="arrbol[4]">
            <input class="maintxt1" type="text" placeholder="请输入要修改的电话号码" v-model="arr[2].cont1"/>
        </div>
    </mains>
    <!-- 遮罩 -->
    <zhe v-show="pwd">
        <div class="zhe-w" >
            <template v-for="(it1,in2) in arrchang">
                <div :key="in2" @click="zheChan(in2)">
                   <span>{{it1}}</span>
                   <input type="file"  v-if="in2==1" accept="image/*">
                </div>
            </template>
        </div>
    </zhe>
     <zhe v-show="pwd1">
        <div class="zhe-w" >
            <template v-for="(it1,in3) in arrchang1">
                <div :key="in3" @click="zheChan1(in3)">
                   <span>{{it1}}</span>
                </div>
            </template>
        </div>
    </zhe>
  </div>
</template>

<script>
import Head from './Head.vue';
import Main from './Main.vue';
import Ald from '../Ald.vue';
import axios from 'axios';
export default {
    name:'Person',
    data(){
        return{
            bol1:false,
            arrbol:[false,false,false,false,false],
            bol:false,
            pwd:false,
            pwd1:false,
            arrchang:['从手机相册中选择' ,'拍照','取消'],
            arrchang1:['分享二维码','保存到手机','取消'],
            arr:[
                {
                    key1:'头像',
                    cont1:this.$store.state.headImg,
                },
                {
                    key1:'昵称',
                    cont1:this.$store.state.name,
                },
                {
                    key1:'我的二维码',
                    cont1:'',
                },
                {
                    key1:'我的邀请码',
                    cont1:'',
                },
                {
                    key1:'手机号',
                    cont1:'15012340809',
                }

            ],
            id:this.$store.state.mid,
            sid:this.$store.state.msid,

        }
    },
    components:{
        'heads':Head,
        'mains':Main,
        'zhe':Ald,
    },
    methods:{
        zhu(){
            this.$router.replace('/login');
        },
        change(in1){
            console.log(in1);
            this.bol1=!this.bol1;
            if(in1==0){
                this.$set(this.arrbol,0,true);
            }else if(in1==1){
                this.$set(this.arrbol,1,true);
            }else if(in1==2){
                this.$set(this.arrbol,2,true);
            }else if(in1==3){
                this.$set(this.arrbol,3,true);
            }else if(in1==4){
                this.$set(this.arrbol,4,true);
            }
        },
        suc1(){
             console.log(this.$store.state.mid);
             this.$store.state.name=this.arr[1].cont1;
             var m=this.arr[1].cont1;
             console.log(this.arr[1].cont1);
             var ms=this.$store.state.mid;
             var ms2=this.$store.state.msid;
             var obj={
                 nickName:m,
             }
             console.log(ms,ms2);
           axios.put('/api/small/user/verify/v1/modifyUserNick',{
                headers:{
                    userId:ms,
                    sessionId:ms2,
                },
                    params: {
                    nickName:m,
                },
             }).then(res=>{
                console.log(res.data,'1');
                console.log('=============');
            });
            this.$router.replace('/login');
        //   axios({
        //     url: '/api/small/user/verify/v1/modifyUserNick', // 虚拟路径
        //     method: 'put',
        //     data: obj,
        //     headers:{
        //         userId:ms,
        //         sessionId:ms2,
        //     }
        //     }).then(res => {
        //     console.log(res)
        //     });

        //    axios.post('/api/small/user/verify/v1/receiveAddressList',{
        //         headers:{
        //             userId:ms,
        //             sessionId:ms2,
        //         },
        //         params: {
        //             realName:'你',
        //             phone:'13733336666',
        //             address:'客户端将地址的省 市 县 详细地址 以空格间隔 拼接成字符串传给后台',
        //             zipCode:'111223',
        //         },

        //      }).then(res=>{
        //         console.log(res.data,'1');
        //         console.log('=============');
        //     });

             
        },
        suc2(){
            console.log('修改失败');
        },
        mreset(index){
            console.log(index);
        },
        qingkong(){
            this.seror='0KB';
        },
        gb1(){
            this.bol1=!this.bol1;
            this.arrbol=[false,false,false];
        },
        success(){
            console.log('成功修改');

        },
        zheChan(in2){
            console.log(in2);
            if(in2==2){
                this.zhew();
            }
        },
        zheChan1(in3){
            if(in3==2){
                this.zhew1();
            }
        },
        zhew(){
            this.pwd=!this.pwd;
        },zhew1(){
            this.pwd1=!this.pwd1;
        },
    }
}
</script>

<style scoped>
/* 邀请码 */

.mainCont1{
    margin-top: 4.5rem;
}
.mainCont1 .mainOne{
    font-size: 3rem;
    color: #4c4c4c;
    display: flex;
    width: calc(100% - 4rem);
    padding: 0 2rem;
    margin-bottom: 7.4rem;
}
.mainCont1 .mainTwo{
    font-size: 2.8rem;
    color: #808080;
}
.mainCont1 .mainTwo img{
    width: 27.6rem;
    height: 27.6rem;
    margin: 0 auto 6rem;
}
 .mainOne div{
    height: 10rem;
 }
 .mainOne div:nth-child(1){
    width: 10rem;
    background-color: #e38e8e;
    margin-right: 2rem;
    border-radius: 50%;
    overflow: hidden;
}
.mainOne div:nth-child(1) img{
    width: 100%;
}
 .mainOne div:nth-child(2){
     text-align: left;
     line-height: 10rem;
     width: 40rem;
 }
 .mainTwo1 div:nth-child(1){
     font-size: 3rem;
     color: #4c4c4c;
 }
 .mainTwo1 div:nth-child(2){
     width: calc(100% - 20rem);
     margin: 4.5rem auto;
    font-size: 3rem;
    color: #fff;
    height: 6rem;
    line-height: 6rem;
    border-radius: 6rem;
    background-color: #e53e42;
 }

/*  */
.two-ma{
    top: calc(50% - 2rem);
    height: 4rem;
    width: 4rem;
    background: url(../../assets/user/user-ma1.png) no-repeat 0 0;
    /* background-color: #f0f; */
}
/* 遮罩 */
.zhe-w{
    width: 100%;
    background-color: #fff;
    font-size: 2.8rem;
    color: #4c4c4c;
    position: absolute;
    bottom: 0;
}
.zhe-w div{
    line-height: 9.9rem;
}
.zhe-w div:nth-child(1){
    border-bottom: 0.1rem solid #ccc;
}
.zhe-w div:nth-child(2){
    border-bottom: 0.1rem solid #ccc;
    position: relative;
}
.zhe-w div:nth-child(2) input{
    position: absolute;
    height: 9.9rem;
    opacity: 0;
}
/* 头像 */
.mainImg{
    width: 50rem;
    height: 50rem;
    margin: 7rem auto;
    border-radius: 50%;
    overflow: hidden;
}
.Img1{
    height: 50rem;
}
/* 账户管理 */
.nPwd div{
    height: 10rem;
    font-size: 2.8rem;
    color: #4c4c4c;
    text-align: left;
    border-top: 0.1rem solid #ccc;
    border-left: 0.1rem solid #ccc;
    border-right: 0.1rem solid #ccc;
    padding-left: 6rem;
    position: relative;
}
.nPwd div i{
    position: absolute;
    top: calc(50% - 1.5rem);
    left: 2rem;
    height: 3rem;
    width: 2.2rem;
    background: url(../../assets/user/redphone.png) no-repeat 0 0;

}
/* 密码修改 */
.newPwd input:nth-child(1){
    border-top: 0.1rem solid #ccc;
}
.nPwd{
    height: 10rem;
    line-height: 10rem;
    border-bottom: 0.1rem solid #ccc;
    background-color: #fff;
    position: relative;
}
.nPwd span{
    font-size: 2.8rem;
    color: #4c4c4c;
    position: absolute;
    top: 0;
    left: 0;
    height: 10rem;
    width: 20rem;
    line-height: 10rem;
}
.nPwd input{
     width: calc(100% - 22rem);
    padding: 0 2rem 0 20rem;
    height: 10rem;
    line-height: 10rem;
    font-size: 2.4rem;
    color: #808080;
    text-align: left;

}
/* 遮罩 */
.w-tan1{
    width: calc(100% - 32rem);
    padding: 0 16rem;

}
.tan{
    width: calc(100% - 32rem);
    height: 25rem;
    background-color: #fff;
    text-align: center;
    position: absolute;
    top: 50%;
    transform: translateY(-12.5rem);
    z-index: 11;
}
.tan div:nth-child(1) {
   width:100%;
   height: 16.9rem;
   line-height: 16.9rem;
   color: #4c4c4c;
   font-size: 3rem;
}
.tan div:nth-child(2) {
    line-height: 8rem;
    height: 8rem;
    width: 100%;
    display: flex;
    border: 0.1rem solid #cccc;
    font-size: 2.8rem;
}
.tan div:nth-child(2) span{
    flex:1;
}
.tan div:nth-child(2) span:nth-child(1){
    border-right: 0.1rem solid #cccccc;
}
.btn1{
    color: #4c4c4c;
}
.btn2{
    color: #e53e42;
}
/* 宽 */
.w{
    width: calc(100% - 4rem);
    padding: 0 2rem;
}
/* 手机号修改 */
.mainPwd{
    width: 100%;
}
.mainPwd input{
    width: calc(100% - 4rem);
    margin: 0 2rem;
    border-bottom: 0.1rem solid #cccccc;
    height: 4.5rem;
    padding-top: 3.5rem;
    background-color: #f2f2f2;
    font-size: 2.8rem;
}

/* 公用 */
.Mainbox{
    font-size: 0;
}
.main{
    font-size: 3rem;
}
.HeadTop1 i:nth-child(1){
    height: 3.8rem;
    width: 3.8rem;
    position: absolute;
    top: 50%;
    left: 1.3rem;
    transform: translateY(-1.9rem);
    background: url(../../assets/user/user-wback.png) no-repeat 0 0;
}
.HeadTop1 em{
    height: 9.6rem;
    line-height: 9.6rem;
    position: absolute;
    right: 2rem;
    top: 0;
    font-size: 3rem;
}
/* 列表信息 */
.main{
    width: 100%;
}
.main .mainList{
    background-color: #fff;
}
.mainList li {
    width: calc(100% - 4rem);
    padding: 0 2rem;
    display: flex;
    position: relative;
}
.mainList li span{
    flex: 1;
}
/* .mainList .mLImg{
    width: ;
} */
.mainList li .one{
    text-align: left;
}
.mainList li .two{
    text-align: right;
    padding-right: 4rem;
}
.mainList li>i{
    height: 3rem;
    width: 3rem;
    position: absolute;
    right: 1rem;
    top: calc(50% - 1.5rem);
    /* background-color: #f00; */
}
.mainList li:nth-of-type(1){
    height: 13.8rem;
    border-bottom:  0.1rem solid #cccccc;
    color: #4c4c4c;
}
.mainList li:nth-of-type(1) span:nth-child(1){
    line-height: 13.8rem;
}
.mainList li span:nth-of-type(2){
    position: relative;
    font-size: 2.4rem;
}
.mainList li:nth-child(3),.mainList li:nth-child(4),.mainList li:nth-child(5){
    height: 10rem;
    line-height: 10rem;
}
.mainList li:nth-of-type(1) .two .mLImg{
    position: absolute;
    right: 2.5rem;
    top: calc(50% - 4rem);
    height:8rem;
    width: 8rem;
    text-align: center;
    white-space: wrap;
    border: 0.1rem solid #ccc;
    border-radius: 50%;
    overflow: hidden;
}
.mainList li:nth-of-type(1) span:nth-of-type(2) .mLImg img{
    height: 100%;
}
.mainList li:nth-child(2),.mainList li:nth-child(3),.mainList li:nth-child(4),.mainList li:nth-child(5){
    height: 10rem;
    line-height: 10rem;
    border-bottom:  0.1rem solid #cccccc;
}
.two{
    position: relative;
}
.two i{
position: absolute;
right: 2.5rem;
text-align: right;
line-height: 10rem;
/* background-color: #00f; */
}
</style>